<template>
  <div class="w-header">
    <div class="w">
      <div class="category">
        <div class="category-title">方向：</div>
        <div
          class="category-item"
          @click="$emit('changeSubjectActivePid', '-1')"
          :class="{
            'is-active-item': props.subjectActivePid == '-1',
          }"
        >
          全部
        </div>
        <div
          class="category-item"
          v-for="item in props.subjects"
          :key="item.subjectId"
          @click="$emit('changeSubjectActivePid', item.subjectId)"
          :class="{
            'is-active-item': props.subjectActivePid == item.subjectId,
          }"
        >
          {{ item.title }}
        </div>
      </div>
      <div class="category mt-5" v-show="props.subjectActivePid != '-1'">
        <div class="category-title">分类：</div>
        <div
          class="category-item"
          v-for="item in subjectActiveChild"
          :key="item.subjectId"
          @click="$emit('changeSubjectActiveId', item.subjectId)"
          :class="{
            'is-active-item': props.subjectActiveId == item.subjectId,
          }"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Category" lang="ts">
import { SubjectTree } from '@/api/subject/type'

const props = defineProps(['subjects', 'subjectActiveId', 'subjectActivePid'])
defineEmits(['changeSubjectActiveId', 'changeSubjectActivePid'])
let subjectActiveChild = ref<SubjectTree[]>([])

watchEffect(() => {
  subjectActiveChild.value = props.subjects.find(
    (item: SubjectTree) => item.subjectId == props.subjectActivePid,
  )?.children
})
</script>

<style lang="scss" scoped>
.w-header {
  background-color: #f9f9f9;
  width: 100vw;
  .w {
    padding: 32px 0;
    .category {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .category-title {
        line-height: 30px;
        font-size: 14px;
        font-weight: 500;
        margin-right: 10px;
      }
      .category-item {
        padding: 0 8px;
        line-height: 30px;
        font-size: 14px;
        font-weight: 500;
        margin-right: 24px;
        transition: color 0.3s, background-color 0.3s;
        &:hover {
          cursor: pointer;
          color: #2080f7;
        }
      }
      /* 分类被激活样式 */
      .is-active-item {
        background-color: rgba(32, 128, 247, 0.1);
        border-radius: 8px;
        color: #409eff;
        transition: 0.1s 0.1s linear all;
      }
    }
  }
}
</style>
